<template>
  <div class="swiper-container">
    <el-carousel trigger="click"  height="5rem" v-if="system.bannerList" class="swiper-wrapper" interval="5000" loop pause-on-hover>
      <el-carousel-item v-for="item in system.bannerList" :key="item.id" class="swiper-slide">
        <img :src="item.image" alt="" v-if="item.image" class="bgc">
        <div class="layout">
          <div class="foreground-img slide-txt " :class="`foreground-img-${item.page_position}`" v-if="item.front_image">
            <img :src="item.front_image" alt=""/>
          </div>
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script setup>
import { ref, onBeforeMount } from "vue";

import { pagingConfig } from '@/api/setting'
//获取系统设置
const systemForm = ref({
  "currentPage": 1,
  "pageSize": 10,
  "sort": "",
  "order": "",
  "checked": true,
  "needToSort": true,
  "sortArray": [],
  "orderArray": [],
  "name": "",
  "using": true,
  "orderByStatement": "",
  "statement": ""
})
// 初始化 system 为一个空对象
const system = ref({
  sysName: "",
  copyrightInfo: "",
  copyrightInfoUrl: "",
  icpRecordNumber: "",
  icpRecordUrl: "",
  beianRecordNumber: "",
  beianRecordUrl: "",
});
const getInfo = async () => {
  const res = await pagingConfig(systemForm.value)
  system.value = res.data.list[0].config.addition;
  system.value = JSON.parse(system.value); 
}
onBeforeMount(async() => {
  await getInfo()
})
</script>

<style lang='scss' scoped>
.demonstration {
  color: var(--el-text-color-secondary);
}
.swiper-container {
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
  .swiper-wrapper .swiper-slide {
    display: block;
    overflow: hidden;
    &.is-active{
      .bgc{
        transform: scale(1);
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -o-transform: scale(1);
      }
     .layout .foreground-img img {
        transform: translate(0, 0) !important;
        opacity: 1;
      }
    }
    .bgc {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      transition: all 5s cubic-bezier(0.1, 0, 0.3, 1);
      -webkit-transition: all 5s cubic-bezier(0.1, 0, 0.3, 1);
      transform: scale(1.1);
      -webkit-transform: scale(1.1);
      -moz-transform: scale(1.1);
      -o-transform: scale(1.1);
      object-fit: cover;
    }
    .layout {
      position: relative;
      height: 100%;
      .foreground-img {
        position: absolute;
        height: 100%;
        img {
          transition: all 1s ease-out 0.3s;
          opacity: 0;
          max-width: 100%;
          max-height: 100%;
        }
        &.foreground-img-left {
          left: 0;
          top: 50%;
          transform: translateY(-50%);
          img {
            transform: translate(-100px, 0);
            /* opacity: 1; */
          }
        }
        &.foreground-img-right {
          right: 0;
          top: 50%;
          transform: translateY(-50%);
          img {
            transform: translate(0, -100px);
            /* opacity: 1; */
          }
        }
        &.foreground-img-top {
          top: 0;
          left: 50%;
          transform: translateX(-50%);
          img {
            transform: translateY(-150px);
          }
        }
        &.foreground-img-bottom {
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
          img {
            transform: translateX(150px);
          }
        }

        &.foreground-img-center {
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);

          img {
            transform: translateY(150px);
          }
        }
      }
    }
  }
}
</style>